<script setup lang='ts' name="personnel-organizational-add">
import type { FormInstance } from 'element-plus'

import { getUserDetail, updateSection } from '@fl/api/iam-api/adminrole'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElButton, ElCard, ElCol, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRadioGroup, ElRow, ElSelect } from 'element-plus'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useRule } from '../hooks/use-rule'

const { rules } = useRule()
const router = useRouter()
const route = useRoute()

const formdata = ref<any>({})
const equityOptions = ref([
    {
        color: 'red',
        label: '业务部门',
        value: 0,
    },
    {
        color: 'blue',
        label: '财务部门',
        value: 1,
    },
])
const roleOptions = ref([
    {
        color: 'red',
        label: '所有员工',
        value: 0,
    },
    {
        color: 'blue',
        label: '企业管理员',
        value: 1,
    },
])
const form = ref<any>({
    avatar: '',
    certificate: '',
    code: '',
    email: '',
    mobile: '',
    name: '',
    role: '',
    section: '',
    status: 1,
})

const formRef = ref()

async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            updateSection({ ...form.value, parentobjectid: formdata.value.orgId }).then((res: any) => {
                if (typeof res.data === 'object') {
                    ElMessage.success('保存成功')
                    close()
                }
                else {
                    const data = res.data ? JSON.parse(res.data) : '网络错误'
                    ElMessage.error(data.msg)
                }
            })
        }
        else {
            console.log('error submit!', fields)
        }
    })
}

function close() {
    router.push('/admin/organizational')
}

function getDetail({ mobile }) {
    getUserDetail({ mobile }).then((res: any) => {
        form.value = {
            ...res,
        }
    })
}

async function init() {
    formdata.value = route.query
    if (formdata.value?.mobile)
        getDetail(formdata.value)
}
init()
</script>

<template>
    <ElCard style="height: 100vh;">
        <div mb-40>
            <ElButton @click="close">
                返回列表
            </ElButton>
        </div>

        <ElForm ref="formRef"
                :model="form"
                label-width="auto"
                :rules="rules"
                label-position="top"
        >
            <ElFormItem label="头像"
                        prop="avatar"
            >
                <UpdatedOss v-model="form.avatar" />
            </ElFormItem>

            <ElFormItem label="姓名"
                        prop="name"
            >
                <ElInput v-model="form.name" />
            </ElFormItem>

            <ElRow :gutter="20">
                <ElCol :span="8">
                    <ElFormItem label="手机号"
                                prop="mobile"
                    >
                        <ElInput v-model="form.mobile" />
                    </ElFormItem>
                </ElCol>

                <ElCol :span="8">
                    <ElFormItem label="邮箱"
                                prop="email"
                    >
                        <ElInput v-model="form.email" />
                    </ElFormItem>
                </ElCol>

                <ElCol :span="8">
                    <ElFormItem label="登录名"
                                prop="code"
                    >
                        <ElInput v-model="form.code" />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElFormItem label="从业资格证书"
                        prop="certificate"
            >
                <UpdatedOss v-model="form.certificate" />
            </ElFormItem>

            <ElRow :gutter="20">
                <ElCol :span="12">
                    <ElFormItem label="所属部门">
                        <ElSelect v-model="form.section"
                                  placeholder="请选择"
                                  size="large"
                                  style="width: 240px"
                        >
                            <ElOption v-for="item in equityOptions"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                            />
                        </ElSelect>
                    </ElFormItem>
                </ElCol>

                <ElCol :span="12">
                    <ElFormItem label="角色">
                        <ElSelect v-model="form.role"
                                  placeholder="请选择"
                                  size="large"
                                  style="width: 240px"
                        >
                            <ElOption v-for="item in roleOptions"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                            />
                        </ElSelect>
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElFormItem label="账号状态"
                        prop="status"
            >
                <ElRadioGroup v-model="form.status">
                    <ElRadio value="0">
                        正常
                    </ElRadio>

                    <ElRadio value="1">
                        停用
                    </ElRadio>
                </ElRadioGroup>
            </ElFormItem>

            <ElFormItem flex
                        flex-col
            >
                <div text-center
                     style="width:100%"
                >
                    <ElButton type="primary"
                              @click="doSave(formRef)"
                    >
                        确定
                    </ElButton>

                    <ElButton @click="close">
                        取消
                    </ElButton>
                </div>
            </ElFormItem>
        </ElForm>
    </ElCard>
</template>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 28px;
    color: #8c939d;
    text-align: center;
}
</style>
